<template>
	<view>
		<u-toast ref="uToast" />
		<view id="bg_box" v-if="status && show">
			<view class="icon_view">
				<image src="https://lanhu.oss-cn-beijing.aliyuncs.com/xd1b801752-8056-4701-9262-e27305cd2840"></image>
			</view>
			
			<view class="input_view">
				<input type="text" placeholder="请输入手机号码" v-model="loginForm.tel">
			</view>
			
			<view class="input_view" v-if="loginForm.type==1">
				<input type="password" placeholder="请输入密码" v-model="loginForm.pass">
			</view>
			
			<view class="input_view code_view" v-else>
				<input type="text" class="code" placeholder="请输入您的验证码" v-model="loginForm.code">
				<view @click="onGet_code" v-if="s==0">获取验证码</view>
				<view v-if="s>0">({{s}})</view>
			</view>
			
			<view class="message_view">
				<text @click="changeType">{{ loginForm.type==1?'验证码登录':'密码登录' }}</text>
			</view>
			
			<view class="butt_view">
				<view class="butt" @click="onLogin">登录</view>
			</view>
			
			<view class="butt_view">
				<navigator url="/pages/register/register" open-type="navigate">
					<view class="butt">立即注册</view>
				</navigator>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				type:1,
				loginForm:{
					tel:"",
					pass:'',
					code:'',
					type:1
				},
				s:0,
				status:false,
				show: true
			}
		},
		methods:{
			changeType(){
				var type=this.loginForm.type;
				
				this.loginForm.type=type==1?2:1;
			},
			setS(){
				this.s--;
				
				if(this.s>0){
					setTimeout(this.setS,1000);
				}
			},
			onGet_code(){
				var that=this;
				
				if(this.loginForm.tel==''){
					return this.$refs.uToast.show({
						title: '请输入手机号码'
					});
				}
				
				this.$request({
					url:'/sendtel/index',
					data:{phone:this.loginForm.tel,type:2},
					success(res){
						if(res.data.code==1){
							that.s=60;
							that.setS();
							
							that.$refs.uToast.show({
								title: '发送成功',
								type: 'success'
							});
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'error'
							})
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			onLogin(){
				var that=this;
				
				var form=this.loginForm;
				
				let openId = this.$store.state.openId
				
				if(!openId){
					if(form.tel==''){
						return this.$refs.uToast.show({
							title: '请输入手机号码'
						});
					}
					
					if(form.type==1){
						if(form.pass==''){
							return this.$refs.uToast.show({
								title: '请输入账号密码'
							});
						}
					}else{
						if(form.code==''){
							return this.$refs.uToast.show({
								title: '请输入验证码'
							});
						}
					}
				}
				
				let formData=JSON.parse(JSON.stringify(this.loginForm))
				
				formData.isOpen = 0
				
				if(openId){
					formData.openId=openId
				}
				
				if(!that.status){
					formData.isOpen = 1
				}
				
				// formData.status=that.status
				
				// console.log(openId)
				
				this.$request({
					url:'/login',
					data:formData,
					success:(res)=>{
						if(res.data.code==1){
							that.$store.commit('changeLogin',res.data.data.token)
							
							that.$store.commit('setOpenid',res.data.data.openId)
							
							that.$store.commit('messageSocket')

							if(!that.status){
								that.show = false
							}
							
							that.$refs.uToast.show({
								title: '登录成功',
								type: 'success',
								url: '/pages/user/user',
								isTab:true
							});
						}else{
							if(that.status){
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'error'
								})
							}
						}
					},
					fail:(res)=>{
						if(that.status){
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
						}
						
					},
					complete(){
						that.status = true
					}
				})
			}
		},
		onLoad(){
			if(this.$store.state.port!='android' && this.$store.state.port!='ios'){
				if(this.$store.state.openId){
					
					// console.log(res.data.data)ss
					// console.log(this.$store.state.openId)
					
					this.onLogin()
				}else{
					let that = this
					uni.login({
						provider:'weixin',
						success(res){
							
							that.$request({
								url:'/login/getOpenId',
								data:{code:res.code},
								method:'post',
								success(res){
									if(res.statusCode==200){
										if(res.data.code==1){
											uni.setStorageSync('openId',res.data.data)
											// console.log(res.data.data)
											// console.log(uni.getStorageSync('openId'))
											
											that.$store.state.openId = res.data.data
											
											that.onLogin()
										}
									}else{
										ss
									}
								}
							})
							
						},
					})
				}
			}else{
				this.status = true
			}
			
		}
	}
</script>

<style scoped>
	#bg_box{
		background:url('http://wx.jianmeijiayuan.com/static/image/login_bg.png');
		width: 750rpx;
		height: 100vh;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#bg_box .icon_view image,#bg_box .icon_view{
		width: 190rpx;
		height: 190rpx;
	}
	#bg_box .icon_view{
		border-radius: 190rpx;
		overflow: hidden;
		margin-bottom:120rpx ;
	}
	#bg_box  .input_view{
		width: 500rpx;
		height: 80rpx;
		margin: 20rpx;
	}
	#bg_box .code_view{
		display: flex;
	}
	#bg_box .code_view input{
		flex:1;
	}
	#bg_box .code_view view{
		flex: 1;
		background-color: #EA4389;
		text-align: center;
		color:#fff;
		line-height: 80rpx;
	}
	#bg_box  .input_view input{
		width: 470rpx;
		background-color: #fff;
		height: 80rpx;
		font-size: 28rpx;
		padding-left: 30rpx;
		color:#888;
	}
	#bg_box .butt_view{
		margin-top: 20rpx;
	}
	#bg_box .butt_view .butt{
		width: 340rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #EA4389;
		color:#fff;
		border-radius: 300rpx;
		font-size: 28rpx;
	}
	#bg_box .butt_view:last-child .butt{
		background-color: #fff;
		color:#000;
	}
	#bg_box .message_view {
		width: 500rpx;
	}
	#bg_box .message_view text{
		float:right;
		color:#EA4389;
	}
</style>
